<template>
  <el-dialog
    title="排课"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
    :visible.sync="isShowModal"
    width="1000px"
  >
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clearList"
    />
    <div class="doumee_table_header">
      <el-button
        type="primary"
        @click="addPk"
      >排课</el-button>
    </div>

    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        label="课程名称"
        min-width="200"
        prop="courseName"
        show-overflow-tooltip
      />
      <!-- <el-table-column
        align="center"
        label="课时"
        prop="classNum"
        min-width="100"
      /> -->
      <el-table-column
        align="center"
        label="上课时间"
        prop="classTime"
        min-width="230"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="上课地点"
        prop="site"
        show-overflow-tooltip
        min-width="200"
      />
      <el-table-column
        align="center"
        label="上课教练"
        prop="teacherName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="课程类目"
        prop="items"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="学员人数"
        prop="studentNum"
        min-width="100"
      >
        <template slot-scope="scope">
          <span class="studentNum" @click="showStudent(scope.row)">{{ scope.row.studentNum }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="实际上课人数"
        prop="realNum"
        min-width="100"
      />
      <el-table-column
        align="center"
        label="课时状态"
        prop="status"
        min-width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.status == "0" ? "待上课" : "已上课" }}
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="140" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            1
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />
  </el-dialog>
</template>

<script>
import QueryForm from '@/components/QueryForm'
import { queryFormConfig } from './config'
import { courseTimeList } from '@/api'
export default {
  components: {
    QueryForm
  },
  data() {
    return {
      isShowModal: false,
      queryFormConfig,
      filters: {},
      total: 0,
      list: [],
      listLoading: false,
      pagination: {
        page: 1,
        rows: 10
      },

      modalDialog: this.$store.getters.dialog

    }
  },
  methods: {
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
      }
      this.pagination = pagination
      courseTimeList({ pagination, param: { venueId, ...filters, courseId: this.courseId }})
        .then(res => {
          this.listLoading = false
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.total = res.totalCount
          }
        }).catch(() => {
          this.listLoading = false
        })
    },
    clearList() {
      this.filters = {}
    },
    addPk() {},
    handleSizeChange(val) {
      this.pagination.rows = val
      this.getList()
    }
  }
}
</script>

<style>

</style>
